<template>
	<view class="page">
		<image style="width: 100%; height:272rpx;" src="../../../static/addallcar.png"></image>
		<view class="top" @click="$goBack(2,'/bundle/pages/carcircumstance/carcircumstance')">
			<view style="width: 500rpx;" >
				<view class="top-name">添加车辆</view>
				<text style="color: #464646;">完善车辆后享受更多服务</text>
			</view>
			<u-button customStyle="width:200rpx;height: 64rpx;color:#000;font-size:24rpx;font-weight: 600;" type="primary" shape="circle" text="添加车辆" color="#FBCC32"></u-button>
		</view>
		<view class="list">
			<u--form labelPosition="left" labelWidth="90" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="上牌时间:" prop="userInfo.name" borderBottom ref="item1" @click="show=true">
					<u-input  fontSize="12" v-model="form.userInfo.name" border="none" placeholder="请输入">
						<template slot="suffix">
							<view style="color:#0F62F0;font-size: 26rpx;">选择日期</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="里程数:" prop="userInfo.name" borderBottom ref="item1">
					<u--input fontSize="12" v-model="form.userInfo.name" border="none" placeholder="请输入"></u--input>
				</u-form-item>

				<u-form-item label="手机号:" prop="userInfo.name" borderBottom ref="item1" @click="show=true">
					<u-input fontSize="12" v-model="form.userInfo.name" border="none" placeholder="请输入">
						<template slot="suffix">
							<template slot="suffix">
								<u-toast ref="uToast"></u-toast>
								<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
								<view style="color:#0F62F0;font-size: 26rpx;" @tap="getCode">{{tips}}</view>
							</template>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="验证码:" prop="userInfo.name" borderBottom ref="item1">
					<u--input fontSize="12" v-model="form.userInfo.name" border="none" placeholder="请输入"></u--input>
				</u-form-item>
			</u--form>
			<u-button customStyle="height: 64rpx;width:400rpx;margin-top:30rpx;color:#000;font-size:28rpx;font-weight: 600;" color="#FBCC32">询底价</u-button>
		</view>
<u-calendar :show="show"  mode="date" min-date="2013-1-1" month-num="100"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips:0,
				show: false,
				maxDate: '',
				form: {
					userInfo: {
						name: '',
						show: false
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 718rpx;
		height: 180rpx;
		background-color: #fff;
		margin: 16rpx;
		padding: 14rpx;
		box-sizing: border-box;
		@include flex(row, space-between, center) font-size: 28rpx;

		.top-name {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}

	::v-deep .u-button {
		// width: 250rpx !important;
		
		color: #000 !important;
	}

	.list {
		width: 718rpx;
		background-color: #fff;
		margin: 20rpx;
		padding: 14rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-size: 30rpx;
		padding-left: 10rpx;
	}
</style>